﻿@page "/pivot-table/defer-layout-update"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
    <p>This sample demonstrates the defer layout update feature of the pivot table. The defer layout update allows users to refresh the pivot table on-demand instead of during every UI interaction.</p>
</SampleDescription>
<ActionDescription>
   <p>Deferring a layout update can be useful when you need to remove or add multiple fields in a report and you don't want to
     update the pivot table after each change. Now, you can update a pivot table after performing all changes at the report level in the field list resulting in better performance.</p>
    <p> In this sample, the <b>Defer Layout Update</b> option can be enabled or disabled via field list UI.</p>
    <p>In general, this feature can be enabled by setting the <code>AllowDeferLayoutUpdate</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> class to <b>true</b>.</p>
    <p>More information on the defer update feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/defer-layout-update/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" @ref="@PivotView" Height="620" Width="99%" AllowDeferLayoutUpdate="true" EnableValueSorting=true ShowTooltip=false>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            <PivotViewEvents TValue="PivotProductDetails" EnginePopulated="pivotenginepopulated" Drill="@UpdateDrillInfo"></PivotViewEvents>
        </SfPivotView>
        <SfPivotFieldList TValue="PivotProductDetails" @ref="@FieldList" RenderMode="Mode.Fixed" AllowDeferLayoutUpdate="true" AllowCalculatedField="true">
            <PivotFieldListDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotFieldListColumns>
                    <PivotFieldListColumn Name="Year"></PivotFieldListColumn>
                </PivotFieldListColumns>
                <PivotFieldListRows>
                    <PivotFieldListRow Name="Country"></PivotFieldListRow>
                    <PivotFieldListRow Name="Products"></PivotFieldListRow>
                </PivotFieldListRows>
                <PivotFieldListValues>
                    <PivotFieldListValue Name="In_Stock" Caption="In Stock"></PivotFieldListValue>
                    <PivotFieldListValue Name="Sold" Caption="Units Sold"></PivotFieldListValue>
                    <PivotFieldListValue Name="Amount" Caption="Sold Amount"></PivotFieldListValue>
                </PivotFieldListValues>
                <PivotFieldListFilters>
                    <PivotFieldListFilter Name="Product_Categories" Caption="Product Categories"></PivotFieldListFilter>
                </PivotFieldListFilters>
                <PivotFieldListFormatSettings>
                    <PivotFieldListFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotFieldListFormatSetting>
                </PivotFieldListFormatSettings>
                <PivotFieldListDrilledMembers>
                    <PivotFieldListDrilledMember Name="Country" Items="@(new string[] {"France", "Germany", "United States" })"></PivotFieldListDrilledMember>
                </PivotFieldListDrilledMembers>
                <PivotFieldListFilterSettings>
                    <PivotFieldListFilterSetting Name="Products" Items="@(new string[] {"Gloves", "Helmets", "Shorts", "Vests" })" Type="Syncfusion.Blazor.PivotView.FilterType.Include"></PivotFieldListFilterSetting>
                </PivotFieldListFilterSettings>
            </PivotFieldListDataSourceSettings>
            <PivotFieldListEvents TValue="PivotProductDetails" EnginePopulated="enginepopulated"></PivotFieldListEvents>
        </SfPivotFieldList>
    </div>
</div>

<style>
    .e-pivotview {
        float: left;
        min-height: 200px;
        width: 62% !important;
    }

    .e-pivotfieldlist {
        float: right;
        width: 37% !important;
    }

    .e-pivotfieldlist .e-static {
        width: 100% !important;
    }

    html, body {
        height: 100%;
    }
</style>

@code{

    SfPivotFieldList<PivotProductDetails> FieldList;
    SfPivotView<PivotProductDetails> PivotView;

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }
    public async Task pivotenginepopulated(EnginePopulatedEventArgs args)
    {
        await this.FieldList.UpdateAsync(this.PivotView);
    }
    public async Task UpdateDrillInfo(DrillArgs<PivotProductDetails> args)
    {
        await this.FieldList.UpdateAsync(this.PivotView);
    }
    public async Task enginepopulated(EnginePopulatedEventArgs args)
    {
        await this.FieldList.UpdateViewAsync(this.PivotView);
    }
}